<template>
    <div>
        <form action="">
            <textarea name="" id="" cols="30" rows="3" placeholder="发表你的评论...">
                
            </textarea>
            <mt-button type="primary" size="large" @click="showComment()">评论</mt-button>
        </form>
        <div class="comment-info">
            <ul>
                <li v-for="item in commentInfo" :key="item.id">
                    <div class="comment-header">
                        <span class="user-name">用户：{{item.user}}</span>
                        <span class="comment-time">发表时间：{{item.time | dateFormat('YYYY-MM-DD')}}</span>
                    </div>
                    <div class="comment-content">
                        {{item.content}}
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                commentInfo: [
                    {id: 0,user: 'wangshuo',content: 'good work,keep going on!',time: new Date()},
                    {id: 1,user: 'wangshuo',content: 'good work,keep going on!',time: new Date()},
                    {id: 2,user: 'wangshuo',content: 'good work,keep going on!',time: new Date()},
                    {id: 3,user: 'wangshuo',content: 'good work,keep going on!',time: new Date()},
                    {id: 4,user: 'wangshuo',content: 'good work,keep going on!',time: new Date()},
                    {id: 5,user: 'wangshuo',content: 'good work,keep going on!',time: new Date()},
                    {id: 6,user: 'wangshuo',content: 'good work,keep going on!',time: new Date()},
                    {id: 7,user: 'wangshuo',content: 'good work,keep going on!',time: new Date()},
                    {id: 8,user: 'wangshuo',content: 'good work,keep going on!',time: new Date()},
                    {id: 9,user: 'wangshuo',content: 'good work,keep going on!',time: new Date()}
                ]
            }
        },
        methods: {
            showComment(){
                alert('成功');
            }
        }
    }

</script>

<style lang="scss" scoped>

    .comment-info {
        padding: 20px 0;

        ul {
            padding: 0;
            margin: 0;
            list-style: none;

            li {
               list-style: none; 
               width: 100%;

               .comment-header {
                    width: 100%;
                    height: 44px;
                    line-height: 44px;
                    color: #333;
                    font-size: 14px;
                    overflow: hidden;

                   .user-name {
                       float: left;
                   }

                   .comment-time {
                       float: right;
                   }
               }

               .comment-content {
                   width: 100%;
                   padding: 10px;
                   background: #f5f5f5;
                   color: #888;
                   font-size: 14px;
               }
            }
        }
    }



</style>

